<template>
  <div class="dispatchList_panel">
    <el-dialog
      title="生产调度"
      width="1800px"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      @closed="closedDialog"
      customClass="mes_dialog">
      <div class="dialog_content_title">
        <span class="alert_title">
          <i class="iconfont icon-tishi"></i>
          <i>工单计划开始完成时间:&nbsp; </i>
          <i class="date_range">{{planStartDate | timeFormat('YYYY-MM-DD')}}&nbsp;—&nbsp;{{planEndDate | timeFormat('YYYY-MM-DD')}}</i>
        </span>
      </div>
      <el-tabs v-model="tabsValue" type="border-card" v-loading="isloading" class="mes_tabs">
        <el-tab-pane label="工序" name="first">
          <workstage-tab :workStageList="workStageList" :multipleStatus="multipleStatus" :saveHandler="saveHandler" ref="workStageTab" :planEndDate="planEndDate"></workstage-tab>
        </el-tab-pane>
        <el-tab-pane label="工序上料清单" name="second">
          <div class="table_panel table_container tab_pane">
            <el-table
              :data="workorderWorkstageMaterialList"
              border
              height="440"
              style="width: 100%; margin-top: 20px">
              <mes-col-comp :key="index" v-for="(column, index) in tableColums.workstageMaterialList" :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="制造资源清单" name="third">
          <div class="table_panel table_container tab_pane">
            <el-table
              :data="workorderWorkstageResourceList"
              border
              height="440"
              style="width: 100%; margin-top: 20px">
              <mes-col-comp :key="index" v-for="(column, index) in tableColums.workstageResource" :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工艺文件" name="fourth">
          <work-stage-tech-file :techProcList="techProcList" :title="'加工工艺说明'" :noFile="'暂无文件'"></work-stage-tech-file>
        </el-tab-pane>
        <el-tab-pane label="制造图纸" name="five">
          <work-stage-tech-file :techProcList="[]" :title="'制造图纸'" :noFile="'暂无图纸'"></work-stage-tech-file>
        </el-tab-pane>
        <el-tab-pane label="设备文件" name="six">
          <device-file-list-tab :deviceFileList="deviceFileList"></device-file-list-tab>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button
          type="primary"
          @click="saveWorkStage"
          :disabled="submitDisabled"
          v-if="tabsValue==='first'&&workStageList.length>0">
          提交
        </el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WorkStageTechFile from '@/components/WorkStageTechFile/WorkStageTechFile'
import tableColums from './dispatchListCols'
import WorkstageTab from './components/WorkstageTab'
import DeviceFileListTab from './components/DeviceFileListTab'
export default {
  name: 'DispatchList',
  props: {
    intoData: Object
  },
  components: {
    WorkStageTechFile,
    WorkstageTab,
    DeviceFileListTab
  },
  data() {
    return {
      dialogTableVisible: false, // dialog开启、关闭状态
      tabsValue: 'first', // tabs组件value值
      isloading: false, // 数据是否在加载
      saveHandler: false, // 是否已经触发点击保存事件
      saveStatus: true, // 保存禁用
      tableColums: tableColums, // 表格列数组
      multipleStatus: false, // 多选框加载状态
      processValue: '', // 周转进度value
    }
  },
  computed: {
    planStartDate() {
      if (this.intoData.dateRange) {
        return this.intoData.dateRange.planStartDate || ''
      }
    },
    planEndDate() {
      if (this.intoData.dateRange) {
        return this.intoData.dateRange.planEndDate || ''
      }
    },
    // 调度tab数据
    listData() {
      return this.$store.state.workSheetManage.dispatchList || {}
    },
    // 工序列表 处理表格数据，当班组或工作中心只有一条时，实现自动赋值
    workStageList() {
      let list = this.listData.turnoverWorkstage || []
      list.forEach((item) => {
        if (item.nametree && Array.isArray(item.nametree) && item.nametree.length === 1) {
          if (!item.workgroupId) { item.workgroupId = item.nametree[0].id }
          if (item.nametree[0].workcenter && Array.isArray(item.nametree[0].workcenter) && item.nametree[0].workcenter.length === 1) {
            if (!item.workcenterId) { item.workcenterId = item.nametree[0].workcenter[0].id }
          }
        }
      })
      return list
    },
    // 物料清单
    workorderWorkstageMaterialList() {
      return this.listData.workstageMateria || []
    },
    // 资源清单
    workorderWorkstageResourceList() {
      return this.listData.workstageResource || []
    },
    // 工艺清单
    techProcList() {
      return this.listData.techProc || []
    },
    // 设备文件列表
    deviceFileList() {
      return this.listData.deviceFiles || []
    },
    // 当前0点0分0秒时间戳
    todayMillisecond() {
      return this.moment(window.serverTime).startOf('day').unix() * 1000
    },
    // 树形列表
    treeList() {
      return this.$store.state.workSheetManage.treeList
    },
    // 工序进度状态
    workstageProcessStatus() {
      return this.$store.state.dict.workstageProcessStatusType.labels || []
    },
    // 提交状态
    submitDisabled() {
      return !this.workStageList.some((item) => item.workstageProcessStatusValue === 'ToBeStarted' || item.workstageProcessStatusValue === 'NotArrive')
    },
    // 批次是否已经下发
    isSendTurnover() {
      return this.processValue === 'ToBeIssued' || this.processValue === 'ToBeAssigned'
    }
  },
  methods: {
    /**
     * dialog弹窗开启
     * @param id 工单ID
     * @param turnoverBatchId 周转批次ID
     * @param processValue 周转批次进度value
     */
    openDialog(id, turnoverBatchId, processValue) {
      this.processValue = processValue
      this.dialogTableVisible = true
      this.isloading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/schedule',
        data: {workorderId: id, turnoverBatchId: turnoverBatchId},
        module: 'workSheetManage',
        state: 'dispatchList'
      }).finally(() => {
        this.isloading = false
        this.multipleStatus = true
      })
    },
    /**
     * 保存工序
     * @param list 工序列表
     */
    saveWorkStage() {
      this.saveHandler = true
      let workStageListFilter = this.$refs.workStageTab.workStageListFilter
      if (workStageListFilter.some((item) => !item.planStartDate)) {
        return this.tipMessage('error', '工序计划开始时间不能为空')
      }
      if (workStageListFilter.some((item) => !item.planEndDate)) {
        return this.tipMessage('error', '工序计划完成时间不能为空')
      }
      if (workStageListFilter.every((item) => !item.workgroupId || !item.workcenterId)) {
        return this.tipMessage('error', '请选择执行班组、工作中心')
      }
      if (!this.isSendTurnover && workStageListFilter.some((item) => !item.workgroupId || !item.workcenterId)) {
        return this.tipMessage('error', '请选择执行班组、工作中心')
      }
      let postData = JSON.parse(JSON.stringify(workStageListFilter))
      postData.forEach((item) => {
        if (Array.isArray(item.staffIds)) {
          item.staffIds = item.staffIds.join(',')
        }
        if (Array.isArray(item.deviceIds)) {
          item.deviceIds = item.deviceIds.join(',')
        }
      })
      if (this.saveStatus) {
        this.saveStatus = false
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/turnoverworkstage/turnoverWorkstage/saveBatch2',
          data: {turnoverWorkstageList: postData},
          module: 'workSheetManage',
          noCommit: true
        }).then(() => {
          this.dialogTableVisible = false
          this.$emit('submitSuccess')
          this.tipMessage('success', '保存成功')
        }).catch(() => {
          this.saveStatus = true
        })
      }
    },
    // 关闭dialog
    closedDialog() {
      this.tabsValue = 'first'
      this.saveHandler = false
      this.saveStatus = true
      this.multipleStatus = false
      this.processValue = ''
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  td.break_left{
    .jump_item{
      span{
        padding-right: 10px;
        line-height: 24px;
      }
    }
  }
  .dispatchList_panel {
    .el-dialog__body {
      .dialog_content_title {
        .alert_title {
          i {
            color: #333;
          }

          .icon-tishi {
            color: #f4970b;
          }
        }
      }

      .el-tabs--border-card {
        box-shadow: none;
        & > .el-tabs__header {
          margin-bottom: 20px;
        }
      }
    }
  }
</style>
